<template>
    <div>
        
        <div>
            <el-row type="flex" class justify="space-between">
                <el-col :span="7" @click.native="index()">
                    <div >
                        <el-menu
                            :default-active="activeIndex"
                            class="el-menu-demo"
                            mode="horizontal"
                            @select="handleSelect"
                        >
                          <el-menu-item index="11" @click.native="index()">首页</el-menu-item>
                          <el-menu-item index="2" @click.native="archives()">时间轴</el-menu-item>
                          
                          
                            <el-menu-item index="3" @click.native="tags()">标签</el-menu-item>
                            <el-menu-item index="4" @click.native="categories()">分类</el-menu-item>

                        </el-menu>
                    </div>
                </el-col>

                <el-col :span="10">
                    <el-row type="flex" :span="1" justify="center">
                        <el-col :span="4">
                            <el-button
                                type="primary"
                                style="margin-right: 20px;margin-top: 12px;width=200px"
                                @click="login"
                            >登录</el-button>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Header',
    data() {
        return {};
    },
    methods: {
        login() {
            if (sessionStorage.getItem('userInfo') == null) this.$router.push('/login');
            else {
                this.$router.push('/dashboard');
            }
        },
        index() {
            this.$router.push('/index');
        },
        archives() {
            this.$router.push('/archives');
        },
        tags() {
            this.$router.push('/tags');
        },
        categories() {
            this.$router.push('/categories');
        }
    }
};
</script>



<style>
.el-col {
    border-radius: 4px;
}

.div1 {
    text-align: center;
    line-height: 33px;
    font-size: 15px;
}
</style>